轻松实现 vue webApp 的引导页功能
朱嘉伟
6月 18, 2017
使用 vue + vue-router + vueg + vue-touch 轻松实现app引导页的DEMO、教程，本例程也适用于轻松实现轮播图
先来看看最终效果图(live demo)：
下载模板和依赖项
$ vue init webpack vue-guide-demo //使用vue-cli下载webpack模板
cli的提示中只安装vue-router就够了：
Install vue-router?
Yes Use ESLint to lint your code?
No Setup unit tests with Karma+ Mocha?
No Setup e2e tests with Nightwatch?
$ cd vue-guide-demo //进入项目目录
$ npm install //安装依赖项
$ npm install vue-touch@next vueg --save //安装vue-touch、vueg，vue-touch@next和vue-touch的区别是前者支持vue2.x
$ npm run dev //运行
开始编辑项目文件：
1、编辑src/router/index.js
为了方便管理，导航页采用嵌入路由的方式，即每一个导航页作为path:’/guide’的子路由，我们新建四个页面组件，添加到router中：
import Vue from 'vue'
import Router from 'vue-router'
import guide from '@/components/guide'
import guide1 from '@/components/guide1'
import guide2 from '@/components/guide2'
import guide3 from' @/components/guide3'
import guide4 from' @/components/guide4'
Vue.use(Router)
export default new Router({
routes: [{
path: '/guide',
name: 'guide',
component: guide,
children: [{
name:'default',
path:'',
component:guide1
},{
name:'page1',
path: '1',
component: guide1
}, {
name:'page2',
path: '2',
component: guide2
}, {
name:'page3',
path: '3',
component: guide3
}, {
name:'page4',
path: '4',
component: guide4
}]
}]
})
那么app的引导页的URL就是http://localhost:8080/guide
2、编辑src/main.js
照着vue-touch和vueg的文档做，在头部的import语句后跟上以下的代码：
import VueTouch from 'vue-touch'
import vueg from 'vueg'
import 'vueg/css/transition-min.css'
Vue.use(vueg, router,{
tabs:[{ //由于底部的圆点导航类似于tab导航，都是水平转场效果，所以填入这个配置项，可以参考vueg配置项
name:'page1'
},{
name:'page2'
},{
name:'page3'
},{
name:'page4'
}]
})
Vue.use(VueTouch, { name: 'v-touch' })
3、编辑组件
修改App.vue
<template>
<div id="app">
<!-- vue-touch提供的滑动事件指令，可以参考vue-touch文档 -->
<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight">
<router-view></router-view>
</v-touch>
<!-- 页面底部的圆点导航 -->
<ul class="circle-nav">
<li :class="{'nav-current':$route.name==='page1'||$route.name==='default'}"></li>
<li :class="{'nav-current':$route.name==='page2'}"></li>
<li :class="{'nav-current':$route.name==='page3'}"></li>
<li :class="{'nav-current':$route.name==='page4'}"></li>
</ul>
</div>
</template>
<script>
export default {
methods: {
onSwipeLeft() {
// router转场后会自动触发vueg的转场特效
switch (this.$route.name) {
case 'default':
case 'page1':
this.$router.push({
name: 'page2'
})
break
case 'page2':
this.$router.push({
name: 'page3'
})
break
case 'page3':
this.$router.push({
name: 'page4'
})
break
}
},
onSwipeRight() {
this.$router.back()
}
}
}
</script>
<style>
html,
body {
margin: 0;
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
height: inherit;
}
#app>div {
height: inherit;
}
.circle-nav {
position: fixed;
bottom: 10px;
width: 100%;
max-width: inherit;
text-align: center;
padding: 0;
opacity: 0.75;
}
.circle-nav li {
display: inline-block;
width: 7px;
height: 7px;
border: 1px solid #f44336;
border-radius: 50%;
margin: 5px;
}
.nav-current {
background-color: #f44336;
}
</style>
guide.vue内容：
<template>
<!-- 引导页会显示在这个嵌套路由中 -->
<router-view class="view"></router-view>
</template>
<style>
.view {
min-height: 100%;
text-align: center;
line-height: 100px;
color: rgba(0,0,0,0.5);
}
</style>
guide(1|2|3|4).vue的内容：
<template>
<div>
引导页1
</div>
</template>
<script>
export default{
data(){
return {
//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
vuegConfig:{
disable:false
}
}
}
}
</script>
<style scoped>
div {
background: linear-gradient(to bottom, #c9d6ff, #e2e2e2);
}
</style>
最后在index.html的head中添加不缩放的配置：
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
到此，我们做了配置路由、编写组件和样式、给vueg做了简单的配置，使用了vue-touch的滑动事件指令，一个引导页功能就完成了。